<template>
	<view class="earlyWarning">
		<view class="" style="height: 160rpx;">
			<view class="mail_List fixed z_ninetynine">
				<view class="mail" style="font-weight: 700;">
					<view class="order">签约信息</view>
				</view>
			</view>
			<view class="icon fixed z_ninetynine">
				<u-icon name="arrow-left" color="#fefefe" size="40" @click="navigateBack"></u-icon>
			</view>
		</view>
		<!-- 巡更信息 -->
		<view class="">
			<view class="data_Statistics" style="padding: 44rpx 40rpx 0 24rpx;">
				<view class="">
					<text style="font-weight: 700; font-size: 30rpx; color: #0d92ff;">丨</text><text
						style="font-weight: 700; font-size: 30rpx;">签约信息</text>
				</view>
			</view>
			<view class="card" style="padding: 0 42rpx;">
				<view class="cardNumber">
						<u-form-item label="卡号:" label-width="200" :label-style="{'text-align': 'center'}" :border-bottom='false'>
							<u-input v-model="form.number" :disabled='true'  />
						</u-form-item>
						<u-form-item label="卡类型:" label-width="200" :label-style="{'text-align': 'center'}" :border-bottom='false'>
							<u-input v-model="form.type" :disabled='true'  />
						</u-form-item>
				</view>
				<view class="personal">
					<!-- 					<view class="">
						<text>姓名:</text>
						<text>李信</text>
					</view>
					<view class="">
						<text>联系方式:</text>
						<text>15056987656</text>
					</view>
					<view class="">
						<text>身份证:</text>
						<text>3298764239710987</text>
					</view>
					<view class="">
						<text>卡号:</text>
						<text>3298764239710987</text>
					</view> -->
					<u-form :model="form" ref="uForm">
<!-- 						<view class="">
							<text>姓名:</text>
							<text>李信</text>
						</view> -->
<!-- 						<view class="">
							<text>联系方式:</text>
							<text>15056987656</text>
						</view> -->
						<u-form-item label="姓名:" label-width="200" :label-style="{'text-align': 'center'}" :border-bottom='false'>
							<u-input v-model="form.name" :disabled='true'  />
						</u-form-item>
						<u-form-item label="联系方式:" label-width="200" :label-style="{'text-align': 'center'}" :border-bottom='false'>
							<u-input v-model="form.contact" :disabled='true'  />
						</u-form-item>
						<u-form-item label="身份证:" label-width="200" :label-style="{'text-align': 'center'}" :border-bottom='false'>
							<u-input v-model="form.sex" :disabled='true' type="password" />
						</u-form-item>
						<u-form-item label="验证码:" prop="code" label-width="200" :border-bottom='false'>
							<u-input v-model="model1.code" border="none" placeholder="请填写验证码" :custom-style="{'width': '10rpx'}"></u-input>
									<u-toast ref="uToast"></u-toast>
									<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" 
									@change="codeChange"></u-verification-code>
									<u-button type="primary" slot="right" shape="circle" size="mini" :custom-style="{'width': '150rpx'}" @click="getCode">{{tips}}</u-button>
						</u-form-item>
					</u-form>
				</view>
			</view>

			<view class="card_bottom" style="display: none;">
				<view class="choice">
					<view class="" style="width: 150rpx;height: 2rpx;margin: auto 0;background-color: #b7dfff;">

					</view>
					<view class="">
						请选择支付方式
					</view>
					<view class="" style="width: 150rpx;height: 2rpx;margin: auto 0;background-color: #b7dfff;">

					</view>
				</view>
				<view class="payment">
					<view class="" style="width: 100rpx;height: 100rpx;">
						<image src="/static/workOrder/Group832.png" mode="" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="" style="width: 100rpx;height: 100rpx;" @click="subscription">
						<image src="/static/workOrder/Group832.png" mode="" style="width: 100%;height: 100%;"></image>
					</view>
				</view>
			</view>
			<view class="card_weChat" >
								<u-checkbox-group style="text-align: center;">
									<u-checkbox 
										v-model="disabled2"
										:label-disabled="true"
										label-size="23rpx"
										size="23rpx"
										@change="checkboxChange"
									>签约即为同意<text style="margin-left: 10rpx;color: #0d92ff;">用户协议</text></u-checkbox>
								</u-checkbox-group>
				<u-button type="primary" @click="contract">签<text style="margin-left: 70rpx;">约</text></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				disabled1: false,
				tips: '',
				// refCode: null,
				seconds: 3,
				// 控制单选框
				disabled2: false,
				model1: {
					userInfo: {
						name: 'uView UI',
						sex: '',
						birthday: ''
					},
					radiovalue1: '苹果',
					checkboxValue1: [],
					intro: '',
					code: ''
				},
				form: {
					number:'3298764239710987',
					type:'储蓄卡',
					sex: '34014354583485834',
					contact:'43423432',
					name:'李信'
				},
				rules: {
					code: {
						type: 'string',
						required: true,
						len: 4,
						message: '请填写4位验证码',
						trigger: ['blur']
					}
				},
			}
		},
		methods: {
		// 选中某个复选框时，由checkbox时触发
		checkboxChange() {
			this.flag=true
			//console.log(e);
		},
		// 选中任一checkbox时，由checkbox-group触发
		// checkboxGroupChange(e) {
		// 	// console.log(e);
		// },
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			// end() {
			// 	this.$u.toast('倒计时结束');
			// },
			// start() {
			// 	this.$u.toast('倒计时开始');
			// },
			// 跳转支付订单详情页面
			contract() {
				this.openUrl('/pagesB/my/drivingPayment/orderDetails/subscriptionInformation/paymentOrder/paymentOrder')
			}
		}
	};
</script>

<style lang="scss" scoped>
	.earlyWarning {
		.wrap {
			padding: 24rpx;
		}

		.mail_List {
			overflow: hidden;
			width: 100%;
			background-color: #f2f2f2;

			.mail {
				padding: 10rpx 0;
				// margin-top: 96rpx;
				color: #f2f2f2;
				font-size: 40rpx;
				background-color: #2e576f;
			}

			.order {
				text-align: center;
			}
		}

		/deep/.card {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 96%;
			height: 560rpx;
			margin: 20rpx auto 0;
			background-image: url(/static/workOrder/big.png);
			background-size: 100% 100%;

			// background-color: red;
			.cardNumber {
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				width: 80%;
				height: 34%;
				// background-color: pink;
				.u-form-item {
					padding: 0;
				}
				u-form-item:nth-child(1) {
					.u-form-item--left__content__label {
						    letter-spacing: 28rpx;
					}
					
				}
				u-form-item:nth-child(2) {
					.u-form-item--left__content__label {
						letter-spacing: 10rpx;
					}
					
				}
			}

			.personal {
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				width: 80%;
				height: 59%;
				// background-color: pink;
				.u-form-item {
					padding: 0;
				}
				u-form-item:nth-child(1) {
					.u-form-item--left__content__label {
						    letter-spacing: 28rpx;
					}
					
				}
				u-form-item:nth-child(n+3) {
					.u-form-item--left__content__label {
						letter-spacing: 10rpx;
					}
					
				}
			}

		}

		.card_bottom {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 70%;
			height: 195rpx;
			margin: 0 auto;
			// background-color: red;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 100rpx;

			.choice {
				display: flex;
				justify-content: space-between;
			}

			.payment {
				display: flex;
				justify-content: space-around;
				width: 100%;
				height: 51%;
				// background-color: pink;
			}
		}

		.card_weChat {
			width: 70%;
			margin: 0 auto;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 100rpx;
			/deep/u-checkbox {
				.u-checkbox {
					float: unset!important;
					margin-bottom: 30rpx;
				}
			}
		}

		.icon {
			position: absolute;
			top: 18rpx;
			left: 20rpx;
		}

		.data_Statistics {
			display: flex;
			justify-content: space-between;
		}
	}
</style>
